<template>
    <div v-if="processList.length" class="elTabBox">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleChangeTab">
            <el-tab-pane v-for="(item, index) in processList" :key="index" :label="item.tabName" :name="item.tabName">
                <div v-for="(log, index2) in item.logs" :key="index2" class="elTabDiv mt10 flexR-FS-C">
                    <div class="flexR-FS-C">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <div class="elTabName ml10 flexC-FS-FS">
                            <el-text type="primary" style="display: inline-block;">{{ log.operator }}</el-text>
                            <el-text class="mt10" type="info">{{ log.operatorDept }}</el-text>
                        </div>
                    </div>
                    <div class="ml50 flexC-FS-FS">
                        <p><el-text>{{ log.remarkHtml }}</el-text></p>
                        <p class="mt10"><el-text type="info">接收人：{{ log.receivedPersons }}</el-text></p>
                        <p class="mt10">
                            <el-text type="info">
                                {{ `${log.operateDate} ${log.operateTime} [${log.nodeName}
                                / ${logsOptions[log.logtype]}]` }}
                            </el-text>
                        </p>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <div class="paginationBox flexR-Cen">
            <pagination
                v-model:total="total" v-model:page="paginationQuery.pageNo"
                v-model:limit="paginationQuery.PageSize" layout="total, ->, prev, pager" @pagination="getList"
                @update:limit="changeLimit"
            />
        </div>
    </div>
</template>

<script setup>
import paginationData from '@/hooks/paginationData'
import { getRequestLogsApi } from '@/api/contract'
import commonData from '@/hooks/commonData'
import { logsOptions } from '@/components/common'

const props = defineProps({
    detailsLength: {
        type: Number,
        default() {
            return 0
        }
    }
})
const { getContractData } = commonData()

const { total, paginationQuery, changeLimit } = paginationData()
const contractData = ref({})
const activeName = ref('')
const headSrc = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
// 流程意见
const processList = ref([])

onMounted(() => {
    getList()
})

async function getList() {
    contractData.value = getContractData()
    if (contractData.value.contractInitiationUuId) {
        const params = {
            uuid: contractData.value.contractInitiationUuId
        }
        const { data } = await getRequestLogsApi(params)
        if (data && data.length) {
            processList.value = data
            activeName.value = processList.value[0].tabName
            total.value = data[0].logs.length
        }
    }
}

function handleChangeTab(data) {
    const item = processList.value.find(el => el.tabName === data.paneName)
    if (item) {
        total.value = item.logs.length
    }
}
</script>

<style scoped lang='scss'>
.elTabBox {
    margin-top: 40px;
    background-color: #fff;
    .demo-tabs {
        font-size: 13px;
        :deep(.el-tabs__content) {
            padding: 0 20px;
        }
        .elTabDiv {
            padding-bottom: 5px;
            border-bottom: 1px solid #e0e0e0;
            .elTabName {
                min-width: 60px;
                max-width: 100px;
            }
        }
        .text1 {
            color: #666;
        }
    }
    .paginationBox {
        width: 100%;
        background: #fff;
        padding: 4px 0;
    }
}
</style>
